<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Brand list</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1>the first page</h1>
        <form>
            <input type="text" name="name">
            <input type="button" value="Search" onclick="doQueryBrands()" class="btn btn-success">
            <input type="button" value="Add" onclick="doAddUI()" class="btn btn-success">
        </form>

        <table class="table">
            <!--thead用于定义table中的列标题部分-->
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>remark</th>
                    <th>createdTime</th>
                    <th>operation</th>
                </tr>
            </thead>
            <!--tbody用于定义table中的表体部分-->

            <tbody>
                <tr th:each="brand:${list}">
                    <td th:text="${brand.id}"></td>
                    <td th:text="${brand.name}"></td>
                    <td th:text="${brand.remark}"></td>
                    <td th:text="${#dates.format(brand.createdTime,'yyyy/MM/dd HH:mm')}"></td>
                    <td>
                        <button type="button" th:onclick="doDeleteById([[${brand.id}]])" class="btn btn-danger">delete</button>
                        <button type="button" th:onclick="doFindById([[${brand.id}]])" class="btn btn-danger">update</button>
                    </td>
                </tr>
            </tbody>

        </table>

    </div>
    <script>
        function doAddUI() {
            location.href=`http://localhost:80/brand/doAddUI`
        }

        function doFindById(id) {
            location.href=`http://localhost:80/brand/doFindById/${id}`
        }

        function doDeleteById(id) {
            location.href=`http://localhost:80/brand/doDeleteById/${id}`
        }

        function doQueryBrands() {
            /*获取表单输入的品牌名称*/
            var name=document.forms[0].name.value;
            //访问服务端指定的url
            location.href=`http://localhost:80/brand/doFindBrands/${name}`
        }
    </script>


</body>
</html>